<!DOCTYPE HTML>
<html>
<head>
<title>SonaattiSetit</title>
<link media="all" type="text/css" href="sonaattisetit.css" rel="stylesheet">
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />

<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){	
	$.getJSON("http://sonaattisetit.appspot.com/getMenusAsJSON.jsp", {}, function(data) {
		$.each(data, function(){
			var restaurant = this.restaurant;
    		var dishes = this.dishes;
    		
    		var li = '<li>'+restaurant+'<ul>';
    		$.each(dishes, function(){
    			li += '<li>'+this+'</li>';
    		});
    		li += '</ul></li>';
    		    		
    		$('#menus').append(li);
    	});
    	$('#menus').listview("destroy").listview();
	});
});
</script>
</head>
<body>
<div data-role="page" id="home"> 
	<div data-role="header">
		<h1>SonaattiSetit</h1>
	</div>	
	<div data-role="content"> 
		<ul data-role="listview" id="menus"></ul> 
	</div>
</div>
</body>
</html>